<template>
  <Card>
    <div class="btns">
      <upload-file
        ref="uploadFile"
        :params="{saveDir: 'insure', type: 'file'}"
        button-name="上传附件"
        @on-change="refreshTable($event)"
      ></upload-file>
      <Button @click="getFileList">刷新</Button>
    </div>
    <div style="margin-top:15px">
      <Table
        ref="selection"
        :columns="columns"
        :data="files"
        :loading="loading"
        border
        height="650"
        size="small"
        stripe
      ></Table>
    </div>
  </Card>
</template>
<script>
import {operationFileList, storeOperationFile} from '../../api/insure'
import UploadFile from '../my-components/upload-file'
import Viewer from 'viewerjs'

export default {
  components: {
    UploadFile
  },
  data() {
    return {
      files: [],
      loading: false,
      columns: [
        {
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '附件名称',
          key: 'file_name',
          align: 'left'
        },
        {
          title: '缩略图（点击预览）',
          key: 'file_path',
          width: 150,
          align: 'center',
          render: (h, params) => {
            if (this.isInArray(['jpg', 'png', 'jpeg'], params.row.file_type)) {
              return h('img', {
                attrs: {
                  src: params.row.file_path
                },
                style: {
                  cursor: 'zoom-in',
                  width: '80px',
                  height: '60px',
                  margin: '10px 0',
                  'object-fit': 'contain'
                },
                on: {
                  click: () => {
                    this.showPic(params.row)
                  }
                }
              })
            } else if (this.isInArray(['doc', 'docx'], params.row.file_type)) {
              return h('img', {
                attrs: {
                  src: require('../../images/icon/word.png')
                },
                style: {
                  width: '55px',
                  height: '60px',
                  margin: '10px 0',
                  'object-fit': 'contain'
                },
                on: {
                  click: () => {
                    this.$Message.warning('暂不支持预览')
                  }
                }
              })
            } else if (this.isInArray(['xls', 'xlsx'], params.row.file_type)) {
              return h('img', {
                attrs: {
                  src: require('../../images/icon/excel.png')
                },
                style: {
                  width: '80px',
                  height: '60px',
                  margin: '10px 0',
                  'object-fit': 'contain'
                },
                on: {
                  click: () => {
                    this.$Message.warning('暂不支持预览')
                  }
                }
              })
            } else if (params.row.file_type === 'pdf') {
              return h('img', {
                attrs: {
                  src: require('../../images/icon/pdf.png')
                },
                style: {
                  cursor: 'zoom-in',
                  width: '60px',
                  margin: '10px 0',
                  'object-fit': 'contain'
                },
                on: {
                  click: () => {
                    this.$Message.warning('暂不支持预览')
                  }
                }
              })
            } else {
              return h('img', {
                attrs: {
                  src: require('../../images/icon/file.png')
                },
                style: {
                  width: '55px',
                  height: '60px',
                  margin: '10px 0',
                  'object-fit': 'contain'
                },
                on: {
                  click: () => {
                    this.$Message.warning('暂不支持预览')
                  }
                }
              })
            }
          }
        },
        {
          title: '附件格式',
          key: 'file_type',
          align: 'center'
        },
        {
          title: '文件大小',
          key: 'size',
          width: 115,
          sortable: true,
          render: (h, params) => {
            const file_size = params.row.file_size
            const m = file_size >= 51200 ?
              ((params.row.file_size * 1.0) / (1024 * 1024)).toFixed(2) + ' MB' :
              ((params.row.file_size * 1.0) / 1024).toFixed(2) + ' KB'
            return h('span', m)
          }
        },
        {
          title: '上传时间',
          key: 'created_at',
          align: 'center'
        },
        {
          title: '上传人员',
          key: 'user_name',
          align: 'center'
        },
      ]
    }
  },
  mounted() {
    this.getFileList()
  },
  methods: {
    showPic(v) {
      const image = new Image()
      image.src = v.file_path
      const viewer = new Viewer(image, {
        hidden: function () {
          viewer.destroy()
        }
      })
      viewer.show()
    },
    isInArray(arr, str) {
      const testStr = ',' + arr.join(',') + ','
      return testStr.indexOf(',' + str + ',') !== -1
    },
    getFileList() {
      this.loading = true
      operationFileList().then(res => {
        if (res.data) {
          this.files = res.data
          this.loading = false
        }
      })
    },
    refreshTable(event) {
      storeOperationFile(event.detail).then(res => {
        if (res.data.result) {
          this.getFileList()
        }
      })
    },
  }
}
</script>
<style>
.ivu-row .ivu-col .ivu-form-item {
  width: 100%;
}
</style>
